<template>
  <div class="dataset-factory-container">
    <!-- 顶部导航栏 -->
    <div class="header-nav">
      <div class="nav-title">数据集工厂 - 40TB电磁数据生成监控</div>
      <div class="nav-actions">
        <el-button type="primary" size="small">导出报告</el-button>
        <el-button type="success" size="small">实时监控</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧监控区域 -->
      <div class="left-panel">
        <!-- 数据生成监控 -->
        <DataGenerationMonitor />
        
        <!-- 三维地球展示 -->
        <CesiumViewer />
      </div>

      <!-- 右侧分析区域 -->
      <div class="right-panel">
        <!-- 数据验证报告 -->
        <DataValidationReport />
        
        <!-- 频谱波形分析 -->
        <SpectrumAnalysis />
        
        <!-- 二维态势图 -->
        <OpenLayersMap />
      </div>
    </div>

    <!-- 底部状态栏 -->
    <div class="status-bar">
      <div class="status-info">
        <span>数据生成状态: <el-tag type="success">运行中</el-tag></span>
        <span>当前进度: {{ progress }}%</span>
        <span>剩余时间: {{ remainingTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import DataGenerationMonitor from './components/DataGenerationMonitor.vue'
import DataValidationReport from './components/DataValidationReport.vue'
import SpectrumAnalysis from './components/SpectrumAnalysis.vue'
import CesiumViewer from './components/CesiumViewer.vue'
import OpenLayersMap from './components/OpenLayersMap.vue'

// 响应式数据
const progress = ref(0)
const remainingTime = ref('计算中...')

// 模拟进度更新
let progressTimer = null

onMounted(() => {
  // 启动进度监控
  progressTimer = setInterval(() => {
    if (progress.value < 100) {
      progress.value += Math.random() * 2
      if (progress.value > 100) progress.value = 100
      
      // 计算剩余时间
      const remaining = ((100 - progress.value) * 3600) / 100
      remainingTime.value = `${Math.floor(remaining / 3600)}h ${Math.floor((remaining % 3600) / 60)}m`
    }
  }, 5000)
})

onUnmounted(() => {
  if (progressTimer) {
    clearInterval(progressTimer)
  }
})
</script>

<style scoped>
.dataset-factory-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100; /* 降低层级，避免覆盖导航栏 */
}

.header-nav {
  height: 8vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-title {
  color: #ffffff;
  font-size: 1.8vw;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-actions {
  display: flex;
  gap: 1vw;
}

.main-content {
  flex: 1;
  display: flex;
  gap: 1vw;
  padding: 1vh 1vw;
  height: calc(84vh - 2vh);
}

.left-panel {
  width: 50vw;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.right-panel {
  width: 48vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.status-bar {
  height: 8vh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  padding: 0 2vw;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.status-info {
  display: flex;
  gap: 3vw;
  color: #ffffff;
  font-size: 1.2vw;
}

.status-info span {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

/* 全局样式覆盖 */
:deep(.el-button) {
  font-size: 1vw;
  padding: 0.8vh 1.5vw;
}

:deep(.el-tag) {
  font-size: 0.9vw;
  padding: 0.3vh 0.8vw;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .nav-title {
    font-size: 2.2vw;
  }
  
  .main-content {
    flex-direction: column;
  }
  
  .left-panel,
  .right-panel {
    width: 98vw;
    height: 40vh;
  }
}
</style>